<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Block on a Wedge</title>
</head>
<body>
<canvas id="physics-diagram" width="550" height="400" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Style and font settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const varFont = 'italic 24px Arial';
    const subFont = 'italic 16px Arial';
    const captionFont = '24px KaiTi'; // A common font for Chinese characters

    // --- GEOMETRIC PARAMETERS ---

    // Base horizontal line
    const y_base = 300;

    // Wedge (m2) parameters
    const theta_deg = 28;
    const theta_rad = theta_deg * Math.PI / 180;
    const wedge_base_length = 380;
    const wedge_corner_br_x = 450; // Bottom-right corner x
    const wedge_corner_bl_x = wedge_corner_br_x - wedge_base_length; // Bottom-left corner x
    const wedge_height = wedge_base_length * Math.tan(theta_rad);
    const wedge_corner_tl_y = y_base - wedge_height; // Top-left corner y

    // Block (m1) parameters
    const block_width = 80;
    const block_height = 60;
    // Distance along the slope from the top corner to the block's bottom-left corner
    const block_dist_on_slope = 100;

    // --- DRAWING FUNCTIONS ---

    // 1. Draw the horizontal surface
    function drawSurface() {
        ctx.beginPath();
        ctx.moveTo(30, y_base);
        ctx.lineTo(520, y_base);
        ctx.stroke();

        // Draw hatches to indicate a fixed surface
        for (let i = 40; i < 520; i += 25) {
            ctx.beginPath();
            ctx.moveTo(i, y_base);
            ctx.lineTo(i - 15, y_base + 15);
            ctx.stroke();
        }
    }

    // 2. Draw the wedge (m2) and its label
    function drawWedge() {
        // Draw the triangle shape
        ctx.beginPath();
        ctx.moveTo(wedge_corner_bl_x, y_base);
        ctx.lineTo(wedge_corner_br_x, y_base);
        ctx.lineTo(wedge_corner_bl_x, wedge_corner_tl_y);
        ctx.closePath();
        ctx.stroke();

        // Add the label "m2"
        const label_m2_x = 180;
        const label_m2_y = 230;
        ctx.font = varFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('m', label_m2_x, label_m2_y);
        ctx.font = subFont;
        ctx.fillText('2', label_m2_x + 16, label_m2_y + 8);
    }

    // 3. Draw the block (m1) and its label
    function drawBlock() {
        ctx.save();

        // Translate the origin to the top corner of the slope and rotate the canvas
        ctx.translate(wedge_corner_bl_x, wedge_corner_tl_y);
        ctx.rotate(-theta_rad);

        // Draw the block (rectangle) in the rotated coordinate system
        // The y-coordinate is negative because the canvas y-axis normally points down
        ctx.strokeRect(block_dist_on_slope, -block_height, block_width, block_height);

        // Add the label "m1" inside the block
        const label_m1_x = block_dist_on_slope + block_width / 2;
        const label_m1_y = -block_height / 2;
        ctx.font = varFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('m', label_m1_x, label_m1_y);
        ctx.font = subFont;
        ctx.fillText('1', label_m1_x + 16, label_m1_y + 8);

        ctx.restore(); // Restore the canvas to its original state (no rotation/translation)
    }

    // 4. Draw the angle theta
    function drawAngle() {
        const arc_radius = 50;
        
        // Draw the arc for the angle
        ctx.beginPath();
        ctx.arc(wedge_corner_br_x, y_base, arc_radius, Math.PI - theta_rad, Math.PI);
        ctx.stroke();

        // Add the label "θ"
        const label_theta_x = wedge_corner_br_x - 40;
        const label_theta_y = y_base - 20;
        ctx.font = varFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('θ', label_theta_x, label_theta_y);
    }

    // 5. Draw the caption text
    function drawCaption() {
        ctx.font = captionFont;
        ctx.textAlign = 'center';
        ctx.fillText('习题 1－33 图', canvas.width / 2, y_base + 50);
    }

    // --- EXECUTE DRAWING ---
    drawSurface();
    drawWedge();
    drawBlock();
    drawAngle();
    drawCaption();

</script>
</body>
</html>